<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8" />
    <style type="text/css">
        .firstStyle {
            position: relative;
            left: 0px;
            top: 10px;
            width: 100px;
            height: 200px;
            background: rebeccapurple;
        }
        
        .firstInStyle {
            position: absolute;
            left: 10px;
            top: 20px;
            width: 50px;
            height: 50px;
            background: #335399
        }
        
        .secondStyle {
            position: absolute;
            left: 300px;
            top: 0px;
            width: 100px;
            height: 200px;
            background: #339961;
            z-index: 4;
        }
        
        .inSecondSyle {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 40px;
            height: 40px;
            background: #993370;
            z-index: 3;
        }
        
        .ininSecondStyle {
            position: absolute;
            left: 20px;
            top: 0px;
            width: 100px;
            height: 100px;
            background: #DF4444;
            z-index: 2;
        }
        
        .forthStyle {
            position: absolute;
            left: 10px;
            top: 300px;
            width: 500px;
            height: 100px;
            background: #444444
        }
    </style>
</head>

<body>
    <div class="firstStyle">
        <div class="firstInStyle">


        </div>
    </div>

    <div class="secondStyle">

        <div class="inSecondSyle">
            <div class="ininSecondStyle"></div>

        </div>
    </div>
    <div class="forthStyle"></div>

</body>



</html>